<template>
  <!-- 新房   二手房-->
  <div class="box" @click="ycdb()">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
        </div>
        <div :style="olds == 1 ? 'color:#64B6A8;' : ''" @click="cutHome(2, 1)">
          美容装饰
        </div>
        <div :style="olds == 2 ? 'color:#64B6A8;' : ''" @click="cutHome(2, 2)">
          维修保养
        </div>
        <div class="sousuo">
          <input type="text" @keyup.enter="search" v-model="HousesPage.searchKeyword" placeholder="请输入关键字开始找服务" />
          <p class="el-icon-search" @click="search"></p>
        </div>
        <!-- <div class="download">下载帮帮同城app</div> -->
        <downloadAppBtn></downloadAppBtn>
      </div>
    </div>
    <div class="saixuan">
      <div class="li">
        <p class="p1">类别</p>
        <p class="p2" @click="priceClick(-1)" :class="priceIndex == -1 || priceIndex.length == 0 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in type2" :key="index" @click="priceClick(item)" :class="priceIndex != -1 && priceIndex.includes(item.valueName)
            ? 'xuan'
            : ''
            ">
            {{ item.valueName }}
          </div>
        </div>
      </div>
      <div class="li">
        <p class="p1">免费</p>
        <p class="p2" @click="freeClick(-1)" :class="freeIndex == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in freeList" :key="index" @click="freeClick(item)" :class="item.valueNum == freeIndex
            ? 'xuan'
            : ''
            ">
            {{ item.valueName }}
          </div>
        </div>
      </div>
    </div>
    <div class="yixuan">
      <div class="na">已选条件：</div>
      <div class="li" v-for="(item, index) in screenList" :key="index" v-show="item.show">
        {{ item.value }}
        <img src="../../assets/cha.png" @click="clear(item)" />
      </div>
      <div class="qinchu" @click="clear(-1)">清除全部</div>
    </div>

    <div class="bottom">
      <div class="list">
        <div class="li" v-for="(item, index) in housesList" :key="index">
          <img class="biao" @click="details(item, $event)" style="
              cursor: pointer;
              object-fit: contain;
              background-color: #00000033;
            " :src="item.coverPhoto ? item.coverPhoto : $img + item.houseImageDiv" />
          <div class="fwxm">
            <div class="t_1" style="cursor: pointer" @click="details(item)">
              {{ item.entryName }}
            </div>
            <div class="t_2 " style="cursor: pointer" @click="details(item)">
              <span style="margin-right: 5px" class="line7">{{
                item.entryDescription
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="housesTotal == 0" style="height:450px;padding-top:120px;box-sizing: border-box;">
        <el-empty></el-empty>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="housesTotal" :current-page="HousesPage.pageNo"
          @current-change="HousesCurrentChange" :page-size="HousesPage.pageSize"></el-pagination>
      </div>
    </div>
    <floor></floor>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
      <img src="@/assets/top.png" />返回顶部
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import tools from "../../components/tools";
export default {
  components: {
    floor,
    heads,
    tools,
  },
  data() {
    return {
      olds: -1,
      isshow: false,
      xuanzhong: 0,
      leibieIndex: -1,
      quyuIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,

      jiaruXuan: "",
      jiaruXuan1: "",
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        serviceType: "", //（1:美容装饰，2：维修保养）
        entryName: "",
        searchKeyword: '',
      },
      housesList: [],
      housesTotal: 0,
      type7: [], //区域
      type8: [], //价格
      type9: [], //面积
      type10: [], //楼层
      type1: [], //类别
      recomHousesList: [], //推荐房源信息
      recomstate: false, //是否出现推荐房源
      searchtext: "",
      loginstate: false,
      screenList: [],
      type2: [],
      freeList: [{ valueNum: 0, valueName: '否', }, { valueNum: 1, valueName: '是' }],
      freeIndex: -1
    };
  },
  mounted() { },
  created() {
    this.init();
  },
  methods: {
    freeClick(item) {
      if (item == -1) {
        delete this.HousesPage.whetherFreeService
        this.freeIndex = -1
      } else {
        this.HousesPage.whetherFreeService = item.valueNum
        this.freeIndex = item.valueNum
      }
      this.HousesPage.pageNo = 1
      this.getHouseInfo()
    },
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: 'jsonp'
      }
      this.$jsonp('https://apis.map.qq.com/ws/location/v1/ip', data).then((data) => {
        // 经度
        this.HousesPage.longitude = data.result.location.lng
        // 维度
        this.HousesPage.latitude = data.result.location.lat
        this.getHouseInfo()
      })
    },
    priceClick(item) {
      if (item != -1) {
        if (this.priceIndex != -1) {
          if (!this.priceIndex.includes(item.valueName)) {
            this.priceIndex.push(item.valueName);
            // // 单选
            // this.priceIndex = [item.valueName];
            this.addOrClear(item.id);
          }
        } else {
          this.priceIndex = [item.valueName];
          this.addOrClear(item.id);
        }

        var arr = this.screenList
          .filter((item2) => item2.show)
          .map((item2) => item2.value);
        arr.length > 0
          ? (this.HousesPage.entryName = arr.join(","))
          : delete this.HousesPage.entryName;
      } else {
        this.priceIndex = [];
        this.addOrClear();
        var arr = this.screenList
          .filter((item2) => item2.show)
          .map((item2) => item2.value);
        arr.length > 0
          ? (this.HousesPage.entryName = arr.join(","))
          : delete this.HousesPage.entryName;

        delete this.HousesPage.entryName;
      }
      // console.log('this.HousesPage',arr)
      this.HousesPage.pageNo = 1
      this.getHouseInfo();
    },
    clear(item) {
      if (item != -1) {
        this.addOrClear(item.id, false);
        this.priceIndex = this.screenList
          .filter((item2) => item2.show)
          .map((item2) => item2.value);
      } else {
        this.addOrClear();
        this.priceIndex = -1;
      }
      var arr = this.screenList
        .filter((item2) => item2.show)
        .map((item2) => item2.value);
      arr.length > 0
        ? (this.HousesPage.entryName = arr.join(","))
        : delete this.HousesPage.entryName;
      this.HousesPage.pageNo = 1
      this.getHouseInfo();
    },
    addOrClear(id, flag = true) {
      this.screenList.map((item) => {
        if (id) {
          if (id == item.id) {
            item.show = flag;
          }
          // 单选
          // else{
          //   item.show = false
          // }
        } else {
          item.show = false;
        }
      });
    },
    ycdb() {
      this.isshow = false;
    },
    init() {
      if (this.$route.query.newOld) {
        this.olds = this.$route.query.newOld;
        this.HousesPage.serviceType = this.$route.query.newOld;
      }
      if (this.$route.query.search) {
        this.searchtext = this.$route.query.search;
        this.HousesPage.searchKeyword = this.$route.query.search;
      }
      this.initMap();
      this.getDictionaries();
      this.getUser();
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    //查询房源信息
    getHouseInfo() {
      // this.HousesPage.searchKeyword = this.searchtext;
      this.$getHttp(
        "/api/mobile/vehicleOwner/getOwnerServices",
        this.HousesPage
      ).then((data) => {
        if (data.code == 200) {
          const contrastIdList = JSON.parse(
            localStorage.getItem("contrastIdList")
          );
          //处理楼层信息
          data.ownerServiceList.pageList.forEach((e) => {
            if (contrastIdList != null) {
              e.houseContrast = false;
              contrastIdList.forEach((el) => {
                if (el == e.id) {
                  e.houseContrast = true;
                }
              });
            }
            e.hasItem = e.serviceItemsDtoList && Array.isArray(e.serviceItemsDtoList) ? e.serviceItemsDtoList.filter((item) => item.id && item.whetherFreeService == 1).length > 0 : false
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });

          //查询是否加入对比
          this.housesList = data.ownerServiceList.pageList;
          this.housesTotal = data.ownerServiceList.pageCount;

          console.log(this.housesList, "222");
        }
      });
    },
    //查询字典(筛选条件)
    getDictionaries() {
      this.$getHttp("/api/mobile/vehicleOwner/queryDataDictionaryList", {
        type: "2",
      }).then((data) => {
        if (data.code == 200) {
          data.dataDictionaryList.forEach((e) => {
            if (e.type == 2) {
              this.screenList.push({
                type: 1,
                id: e.id,
                value: e.valueName,
                show: false,
              });
              this.type2.push(e);
            }
          });
        }
      });
    },

    search() {
      this.HousesPage.pageNo = 1
      this.getHouseInfo();
      return
      if (this.searchtext.trim() != "") {
        // const routeLink = this.$router.resolve({
        //   path: "/index/houseSearch?search=" + this.searchtext,
        // });
        // window.open(routeLink.href, "_blank");
        this.HousesPage.searchKeyword = this.searchtext;
        this.getHouseInfo();
      }
      // this.openUrl({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    titClick(index) {
      this.xuanzhong = index;
      this.HousesPage.pageNo = 1;
      if (index != 0) {
        this.HousesPage.userType = index;
        this.getHouseInfo();
        return;
      }
      delete this.HousesPage.userType;
      this.getHouseInfo();
    },
    leibieClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.leibieIndex = item.valueNum;
        this.HousesPage.type = item.valueNum;
        this.getHouseInfo();
        return;
      }
      this.leibieIndex = item;
      delete this.HousesPage.type;
      this.getHouseInfo();
    },
    quyuClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.quyuIndex = item.valueNum;
        this.HousesPage.region = item.valueName;

        this.getHouseInfo();
        return;
      }
      this.quyuIndex = item;
      delete this.HousesPage.region;
      this.getHouseInfo();
    },

    mianjiClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.mianjiIndex = item.valueNum;
        this.HousesPage.area = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.HousesPage.area;
      this.getHouseInfo();
    },
    loucClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.loucIndex = item.valueNum;
        this.HousesPage.floor = item.remarks;

        this.getHouseInfo();
        return;
      }
      this.loucIndex = item;
      delete this.HousesPage.floor;
      this.getHouseInfo();
    },
    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"))
      this.HousesPage.pageNo = e;
      this.housesList = [];
      this.getHouseInfo();
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList"));
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList", JSON.stringify(contrastIdList));
      this.housesList.forEach((e) => {
        if (e.id == id) {
          e.houseContrast = false;
        }
      });
      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000,
      });
    },
    duibiqx(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return false;
      }
      this.quxiaoduibi(id);
    },
    details(item, event) {
      this.openUrl({
        path: "/index/serviceDetails",
        query: {
          id: item.id,
        },
      });
    },
    cutHome(type, old) {
      this.HousesPage.pageNo = 1;
      // if (old == 1) {
      this.olds = old;
      this.HousesPage.serviceType = old;
      this.HousesPage.searchKeyword = '';
      // } else {
      //   this.olds = 0;
      //   this.HousesPage.serviceType = 1;
      // }
      this.getHouseInfo();
    },
    shopdetails(item) {
      if (item.shop_name == "个人房源") {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {
        this.openUrl({
          path: "/index/ShopDetails",
          query: {
            id: item.shop_id,
          },
        });
      }
    },
    toAgent(id) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
					height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      //   width: 70px;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 940px;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 50px;

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;

      .biao {
        width: 300px;
        height: 200px;
        border-radius: 10px;
      }

      .fwxm {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 24px;
          cursor: pointer;
          font-weight: 600;
          color: #64b6a8;
        }

        .t_2 {
          font-size: 16px;
          color: #666666;
          margin-top: 12px;
        }
      }

      .duibi {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.64);
        cursor: pointer;

        p {
          position: absolute;
          width: 130px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 24px;
          color: #fff;
          border: 2px solid #ffffff;
          font-size: 21px;
        }
      }

      .name {
        margin-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .t_1 {
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          display: flex;
          align-items: center;

          .t_3_mr {
            width: 96px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #3ea3e2;
            font-size: 20px;
            font-weight: 400;
            color: #3ea3e2;
            text-align: center;
            line-height: 30px;
            margin-right: 12px;
          }

          .t_3_mf {
            width: 96px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #e0a00e;
            font-size: 20px;
            font-weight: 400;
            color: #e0a00e;
            text-align: center;
            line-height: 30px;
            margin-right: 12px;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;
        width: 190px;

        .p1 {
          width: 100%;
          font-size: 32px;
          color: #e00000;
          text-align: center;
          margin-bottom: 10px;
        }

        .p2 {
          width: 100%;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 24px;
      }

      img {
        width: 40px;
        height: 20px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 1040px;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;

  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;

  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
